<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <span>省份：</span>
        <select>
            <option class="province"></option>
        </select>
        <span>城市：</span>
        <select>
            <option class="city"></option>
        </select>
        <span>地区：</span>
        <select>
            <option class="area"></option>
        </select>
    </form>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        async function getData() {
            try {
                const pObj = await axios({ url: 'http://hmajax.itheima.net/api/province' })
                console.log(pObj);
                const pname = pObj.data.list[0]
                const cObj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
                const cname = cObj.data.list[0]
                const aObj = await axios({ url: 'http://hmajax.itheima.net/api/area111', params: { pname, cname } })
                const aname = aObj.data.list[0]

                document.querySelector('.province').innerHTML = pname
                document.querySelector('.city').innerHTML = cname
                document.querySelector('.area').innerHTML = aname
            } catch (error) {
                console.dir(error)
            }
        }
        getData()

    </script>

</body>

</html>